<template>
  <el-container>
    <el-header class="header flex_cc">
      <div class="headerBox flex_b">
        <img src="/static/images/logo.png" alt="">
        <div class="headerCentre flex_b relative">
          <p>您好，{{userName}}</p>
          <div class="menu flex">
            <el-menu
              :default-active= 'tagIndex || "0"'
              class="el-menu-demo"
              mode="horizontal"
              @select="handleSelect"
              background-color="#354a58"
              active-text-color="#fff">
              <el-menu-item index="0">首页</el-menu-item>
              <el-menu-item index="1">原料看板</el-menu-item>
              <el-menu-item index="2">订单看板</el-menu-item>
              <el-menu-item index="3">设备看板</el-menu-item>
              <el-menu-item index="4">车间看板</el-menu-item>
            </el-menu>
          </div>
        </div>
        <a href="javascrit:;" @click="exit">退出</a>
      </div>
    </el-header>
    <el-main>
      <v-Home v-if="tagIndex == '0'" @toBoard="toBoard"></v-Home>
      <v-Group v-else :tagIndex="tagIndex"></v-Group>
    </el-main>
  </el-container>
</template>

<script>
  import Home from './Home.vue'
  import Group from './BoardGroup.vue'
  import axios from 'axios'
  import qs from 'qs'
  import { getCookie, delCookie } from '../cookieUtil/cookieUtil';

  export default {
    name: 'Index',
    components: {
      'v-Home': Home,
      'v-Group': Group
    },

    data () {
      return {
        userId: '',
        userName: '',
        tagIndex: '0',
      }
    },

    created(){
      this.userId = getCookie('userId')
      this.userName = getCookie('userName')
      if (this.userId == '' ||this.userId == null) {
        this.$router.push({
          path: "/",
        });
      }
    },

    methods: {
      //切换tag
      handleSelect (key) {
        console.log('handleSelect-key',key);
        this.tagIndex = key;
      },

      //快捷跳转
      toBoard (id, moduleId) {
        this.tagIndex = moduleId;
        // console.log(id)
        // console.log(moduleId)
      },

      //退出
      exit (){
        delCookie('userId')
        this.$router.push({
          path: "/",
        });
      }
    }
  }
</script>

<style scoped>
  .header{
    height: 70px !important;
    padding: 0 30px;
    box-sizing: border-box;
    color: #a0a0a0;
    background: #0f1924;
    /* Old browsers */
    background: -moz-linear-gradient(150deg, #0f1924 0%, #0f1c27 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #0f1924), color-stop(100%, #0f1c27));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(150deg, #0f1924 0%, #0f1c27 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(150deg, #0f1924 0%, #0f1c27 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(150deg, #0f1924 0%, #0f1c27 100%);
    /* IE10+ */
    background: linear-gradient(150deg, #0f1924 0%, #0f1c27 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0f1924, endColorstr=#0f1c27, GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
  }
  .headerBox{
    height: 35px;
  }
  .header img{
    width: 120px;
  }
  .headerCentre{
    width: 65%;
    margin-bottom: -1px;
    border-bottom: 2px solid #575c63;
  }
  .headerCentre::before{
    content: url('../../static/images/123.png');
    width: 50px;
    height: 2px;
    position: absolute;
    -moz-transform:scaleX(-1);
    -webkit-transform:scaleX(-1);
    -o-transform:scaleX(-1);
    transform:scaleX(-1);
    bottom: 13px;
    left: -30px;
  }
  .headerCentre::after{
    content: url('../../static/images/123.png');
    width: 50px;
    height: 2px;
    position: absolute;
    bottom: 13px;
    right: -45px;
  }
  .headerBox p{
    margin: 0;
    line-height: 34px;
    font-size: 14px;
  }
  .header a{
    width: 80px;
    height: 26px;
    margin-top: 5px;
    background-color: #7ecef4;
    border-radius: 13px;
    text-align: center;
    color: #0e151f;
    font-size: 14px;
    line-height: 26px;
  }

</style>
